<template>
  <div class="container">
    <p class="font20 color333 mb30">用户组选择</p>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="right" class="demo-ruleForm mb60">
      <!--名称-->
      <el-form-item label="名称：" prop="name" class="mb30" label-width="155px" >
        <el-input v-model.trim="ruleForm.name" minlength="1" maxlength="10" class="w405 mr8" placeholder="输入名称" clearable></el-input>
        <span class="desc">提示:请输入1-10个字符</span>
      </el-form-item>

      <!--用户组-->
      <div v-for="(item,index) in ruleForm.tripUserGroupRequestList" :key="index" class="mb30" style="margin-left: 68px;">
        <span style="color:red">*</span>
        <span class="font16 color333 ">用户组{{index+1}}：</span>
        <div class="userSetsForm vt mr10">
          <!--用户组类型下拉框·-->
          <el-form-item label="用户组类型："
                        :prop="'tripUserGroupRequestList.' + index + '.userSetType'"
                        :rules="{required: true, message: '请选择用户组类型', trigger: 'change'}"
                        class="mb30 labelColor666 noMargin"
                        label-width="108px">
            <el-select v-model="item.userSetType" @change="userGroupTypeChange(item, index)" placeholder="选择用户组类型" class="w372" clearable >
              <el-option label="动态分组" value="1"></el-option>
              <el-option label="静态分组" value="2"></el-option>
            </el-select>
          </el-form-item>

          <!--用户组下拉框·-->
          <el-form-item label="用户组："
                        :prop="'tripUserGroupRequestList.' + index + '.userGroupId'"
                        :rules="{required: true, message: '请选择用户组', trigger: 'change'}"
                        label-width="108px"
                        class="labelColor666 noMargin">
            <el-select v-model="item.userGroupId" @visible-change="userGroupFocus($event,item.userSetType)" placeholder="选择用户组" class="w372" clearable >
              <el-option
                v-for="item in userGroupsOptions"
                :key="item.id"
                :label="item.userGroupName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-button type="primary" @click="add(index)" class="vb  searchButton" id="operateButton">+</el-button>
        <el-button type="primary" v-if="index >= 1" @click="remove(item)" class="vb  searchButton" id="operateButton">-</el-button>
      </div>

      <!--用户组之间的关系-->
      <el-form-item label="用户组之间的关系：" prop="relation" >
        <el-select v-model="ruleForm.relation" placeholder="请选择" class="w542" clearable >
          <el-option label="交集" value="1"></el-option>
          <el-option label="并集" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-row>
      <el-button @click="cancel" class="cancelButton mr60">取 消</el-button>
      <el-button type="primary" @click="submitForm" class="searchButton">确 认</el-button>
    </el-row>
  </div>
</template>

<script>
  // 自动化营销-----用户组选择组件
  export default {
    name: 'userSelection',
    components: {},
    props: {
      nodeInfo: {
        type: Object,
      },
      journeyId: {
        type: String,
        default: '',
      }
    },

    data() {
      return {
        ruleForm: {
          name: null,                                    //用户组名称
          relation: null,                                //用户组之间的关系
          tripUserGroupRequestList: [
            {
              userSetType: null,                                  //用户组类型
              userGroupId: null,                                 //用户组
            }
          ],             //用户组中数据
        },
        rules: {
          name: [
            {required: true, message: '请输入名称', trigger: 'blur'},
          ],
          relation: [
            {required: true, message: '请选择用户组之间的关系', trigger: 'change'}
          ],
        },                                  //校验规则
        userGroupsOptions: [],
      }
    },

    methods: {
      // 用户组类型触发事件
      userGroupTypeChange(item, index) {
        if (this.ruleForm.tripUserGroupRequestList.length > 0) {
          this.ruleForm.tripUserGroupRequestList[index].userGroupId = null
        }
      },

      // 用户组触发事件
      userGroupFocus(event, groupType) {
        if (event) {
          if (groupType != '' && groupType > 0) {
            let this_ = this
            let param = {
              groupType: groupType
            }
            this_.utils.request.listTUserGroupAllRecord(param, function (res) {
              if (res.data == null) {
                this_.userGroupsOptions = []
              } else {
                this_.userGroupsOptions = res.data
              }
            })
          } else {
            this.userGroupsOptions = []
          }
        } else {
          this.userGroupsOptions = []
        }
      },

      // 得到所有用户组信息
      getUserGroupName() {
        let this_ = this
        this.utils.request.listTUserGroupAllRecord({}, function (res) {
          if (res.data == null) {
            this_.userGroupsOptions = []
          } else {
            this_.userGroupsOptions = res.data
          }
        })
      },

      // 详情
      detail() {
        let this_ = this
        this.utils.request.getBranchNodeDetail({branchNodeId: this.nodeInfo.nodeId}, function (res) {
          if (res.code == '0000') {
            this_.ruleForm = JSON.parse(res.data.nodeVariable)
          } else {
            this_.ruleForm = {
              name: null,                                    //用户组名称
              relation: null,                                //用户组之间的关系
              tripUserGroupRequestList: [{
                userSetType: null,                                  //用户组类型
                userGroupId: null,                                 //用户组
              }
              ],
            }
          }
        })
      },

      // 添加
      add() {
        if (this.ruleForm.tripUserGroupRequestList.length <= 4) {
          let obj = {
            userSetType: null,
            userGroupId: null,
          }
          this.ruleForm.tripUserGroupRequestList.push(obj)
        } else {
          this.$message({
            message: '最多添加5条数据',
            type: 'warning'
          })
        }
      },

       // 删除
      remove(item) {
        let index = this.ruleForm.tripUserGroupRequestList.indexOf(item)
        if (index !== -1) {
          this.ruleForm.tripUserGroupRequestList.splice(index, 1)
          this.getUserGroupName()
        }
      },

      // 关闭弹窗
      close() {
        this.$emit('handleClose', false)
      },

      // 取消按钮
      cancel() {
        this.close()
      },

      // 编辑,修改
      submitForm: function () {
        let this_ = this
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this_.editLoading = true
            let params = Object.assign({}, this_.ruleForm)
            let param = {
              id: this_.nodeInfo.nodeId,
              nodeVariable: JSON.stringify(params)
            }
            this_.utils.request.updateBranchNode(param, function (res1) {
              if (res1.code == '0000') {
                this_.$message({message: '操作成功', type: 'success'})
                this_.close()
                this_.$emit("saveLabelData",{nodeName:params.name});
              } else {
                this_.$message({message: '操作失败, ' + res1.msg, type: 'error'})
              }
            })
          }
        })
      },
    },

    mounted() {
      this.getUserGroupName()
      this.detail()
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .w356 {
    width: 356px !important;

    .el-input__inner {
      width: 356px !important;
    }
  }

  /deep/ .w240 {
    width: 240px !important;

    .el-input__inner {
      width: 240px !important;
    }
  }

  .mb10 {
    margin-bottom: 10px !important;
  }

  .userSetsForm {
    display: inline-block;
    // width: 542px;
    padding: 30px;
    border: 1px solid #999;
    border-radius: 4px;
  }

  .vm {
    vertical-align: middle;
  }

  .mb60 {
    margin-bottom: 60px !important;
  }

  .desc {
    color: #C4C4C4;
    font-size: 12px;
  }
  .mr10{
    margin-right: 10px !important;
  }
  .h32{
    height: 32px !important;
  }
  .vt{
    vertical-align: top;
  }
  .mr8{
    margin-right: 8px !important;
  }
  .vb{
    vertical-align: bottom;
  }
  /deep/ #operateButton{
    border: 1px solid #0079DC !important;
    padding: 0 13px !important;
    height: 20px !important;
    font-size: 18px !important;
    line-height: 20px !important;
    border-radius: 12px !important;
  }
  /deep/ .labelColor666{
    .el-form-item__label{
      color: #666666;
    }
  }
  /deep/ .w372{
    width: 372px !important;
    /deep/ .el-input__innner{
      width: 372px !important;
    }
  }
  /deep/ .w405{
    width: 405px !important;
    .el-input__inner{
      width: 405px !important;
    }
  }
  /deep/ .w542{
    width: 542px !important;
    .el-input__inner{
      width: 542px !important;
    }
  }
  .noMargin{
    /deep/ .el-form-item__content{
      margin-right: 0 !important;
    }  
  }
</style>
